<template>
	<view class="page">
		<q-navbar title="登录" :backgrounds="{backgroundColor:'transparent'}" :isBack="false" />
		<view v-if="isWxlogin=='1'" class="wxLoading">
			<text>正在登录中...</text> <u-loading size="36" color="green"></u-loading>
		</view>
		<view class="page_container" v-else>
			<view class=" logo">
				<view>
					欢迎进入
				</view>
			</view>
			<view class="form">
				<u-form labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item prop="phone" borderBottom :leftIcon="require('@/static/images/zhineng@2x.png')"
						:leftIconStyle="{width:'45rpx',height:'46rpx'}">
						<u-input v-model="form.phone" placeholder="请输入账号" clearable></u-input>
					</u-form-item>
					<u-form-item prop="password" borderBottom :leftIcon="require('@/static/images/mima@2x.png')"
						:leftIconStyle="{width:'45rpx',height:'46rpx'}">
						<u-input v-model="form.password" type="password" placeholder="请输入密码" clearable>
						</u-input>
					</u-form-item>
					<!-- <u-checkbox-group>
						<u-checkbox v-model="value" shape="circle" @change='changeClick'>记住密码</u-checkbox>
					</u-checkbox-group> -->

					<view style="padding: 70rpx 20rpx;">
						<u-button type="primary" :custom-style="{
								backgroundColor:'#3e6edd'
							}" @click="login">登录</u-button>

						<view class="text-btn">
							<view class="btn" @click="goSign">
								忘记密码?
							</view>
							<view class="btn-1" @click='goPws'>
								立即注册>
							</view>
						</view>
					</view>
				</u-form>
			</view>
			<div class="wxLogin">
				<view>
					<view>
						<img src="@/static/images/wx.png" alt="">
					</view>
					<view>微信登录</view>
				</view>
			</div>
		</view>
	</view>
	</view>
</template>

<script>
	import config from '@/config.js'
	export default {
		components: {},
		props: {},
		data() {
			return {
				btnList: [{
					name: '微信一键登录',
					icon: require('@/static/images/wx.png'),
					backgroundColor: '#cef1cd',
					color: '#09bb07',
					type: 'wx'
				}, {
					name: '手机号登录',
					backgroundColor: '#4559d9',
					color: '#fff',
					type: 'zh'
				}],
				form: {
					phone: '',
					password: '',
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
				},
				isWxlogin: "",
			}
		},
		watch: {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			let userInfo = this.$s.get('userInfo')
			let expireTime = this.$s.get('expireTime')
			if (typeof userInfo == 'object' && new Date().getTime() < expireTime) {
				this.router.to({
					path: '/pages/index/index',
					time: 0
				})
			} else if (typeof userInfo == 'object' && new Date().getTime() < expireTime) {
				this.router.to({
					path: '/pages/industryChain/industryChain',
					time: 0
				})
			}

			let code = this.$wx.getCode('code')
			if (code !== null) {
				this.findUser(code)
			}

		},
		onLoad(options) {
			if (options.isWxlogin) {
				this.isWxlogin = options.isWxlogin
			}
		},
		onShow() {},
		methods: {
			async wxLogin() {
				if (!this.agree) return uni.$message.info('请阅读并同意勾选用户协议！')
				let isWx = await this.$wx.isWx()
				if (isWx) {
					if (this.host == 'NH') {
						this.$wx.login('/qcynh/index.html#/pages/login/login?isWxlogin=1')
					} else {
						this.$wx.login('/qcy/index.html#/pages/login/login?isWxlogin=1')
					}
				} else {
					return uni.$message.info('当前不是微信环境！')
				}
			},
			// 微信登录-----------------------------------------------------------
			findUser(val) {
				this.$api.wxLoginPlus({
					code: val
				}).then(res => {
					this.$store.commit('update', ['TOKEN', res.data.token])
					this.$s.set('userId', res.data.userId)
					this.findSingUser(res.data.userId)
				})
			},
			async findSingUser(userId) {
				let expireTime = new Date().getTime() + 15 * 24 * 60 * 60 * 1000
				let res = await this.$api.getInfo(userId)
				if (res.code == 200) {
					res.data = Object.assign({}, res.data.dept, res.data)
					res.data.avatar = config.imgUrl + res.data.avatar
					this.$s.set('userInfo', res.data)
					this.$s.set('expireTime', expireTime)
					this.$s.set('proStatus', res.data.proStatus)
					// 判断是否是农户登录
					if (this.$s.get('host') == 'NH') {
						// 包含农户标识 登录产业链页面
						window.location.href =
							'https://dp.zgsq.cloud/qcynh/index.html#/pages/industryChain/industryChain'
					} else {
						// 判断是否存在身份？若存在跳相应页面 若不存在跳选择身份页面
						if (res.data.proStatus !== null) {
							window.location.href = 'https://dp.zgsq.cloud/qcy/index.html#/pages/index/index'
						} else {
							window.location.href =
								'https://dp.zgsq.cloud/qcy/index.html#/pages/login/identity/identity'
						}
					}

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: url('~@/static/images/login.png') no-repeat top left/100% 100%;
		position: relative;

		.page_container {
			width: 100%;
			height: 70%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 40rpx;

			.logo {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-weight: 700;
				font-size: 48rpx;
				line-height: 60rpx;
				letter-spacing: 5rpx;
				color: #333333;
				margin: 60rpx 0 100rpx;
			}

			.form {
				width: 100%;
				padding: 40rpx;

				.text-btn {
					font-size: 28rpx;
					line-height: 76rpx;
					color: #999999;
					display: flex;
					justify-content: center;

					>view:first-child::after {
						content: '|';
						margin: 0 40rpx;
					}
				}
			}

			.wxLogin {
				display: flex;
				justify-content: center;
				align-items: center;

				>view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 300rpx;
					height: 80rpx;
					background-color: #e6f8e6;
					border-radius: 40rpx;

					>view:first-child {
						width: 59rpx;
						height: 48rpx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					>view:last-child {
						font-size: 30rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #09bb07;
						margin-left: 20rpx;
					}
				}
			}
		}

	}

	.wxLoading {
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>